<template>
    <div>
        <navBar :mybtn="false">
            特色课
            <template #my>
               <span @click="$router.push('/search')">搜索</span>
                <!-- <i class="iconfont icon-sousuo" style="font-size: 30px"></i> -->
            </template>
        </navBar>
        <div class="menu">
            <van-dropdown-menu>
                <van-dropdown-item title="排序" ref="item1">
                    <ul class="menu-item">
                        <li v-for="(v, i) in orderList" :class="{ active: item1active == i }"
                            @click="checkitem1(v.value, i)">
                            {{ v.title }}
                        </li>
                    </ul>
                </van-dropdown-item>

                <van-dropdown-item title="筛选" ref="item2">
                    <div class="menu-item2">
                        <div :class="['menu-item2-t', { active: item2active == i }]" v-for="(v, i) in classifyList"
                            @click="checkitem2(v.id, i)">
                            {{ v.name }}
                        </div>

                        <div v-for="v in num"></div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
            <!-- 列表 -->
            <div>
                <itemty v-for="v in course" :v="v"></itemty>

                <h1 v-show="last">没有更多数据了</h1>
            </div>
        </div>

        <navBottom></navBottom>
    </div>
</template>
  
<script>
import itemty from "@/components/conten/itemty.vue"
import { getCourseBasis, getCourseClassify } from '@/http/course'
export default {
    components: {
        itemty
    },
    data() {
        return {
            item1active: 0,
            item2active: 0,
            classifyList: [],
            orderList: [
                { title: "综合排序", value: 0 },
                { title: "最新", value: 1 },
                { title: "最热", value: 2 },
                { title: "价格从高到低", value: 4 },
                { title: "价格从低到高", value: 3 },
            ],
            course: [],
            last_page: 1,
            last: false,
            courseList: {
                course_type: 0, //课程分类
                // limit: 5,
                classify_id:0,
                page: 1,
                order_by: 0, // 0综合排序，1 最新
            },
        }
    },
    computed: {
        num() {
            let num = 0;
            let yushu = this.classifyList.length % 4
            yushu === 0 ? (num = 0) : (num = 4 - yushu)
            return num
        }
    },
    mounted() {
        this.getCourseBasisFn();
        this.getCourseClassifyFn();
        window.onscroll = () => {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
            if ((Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight)) && scrollTop != 0) {
                if (this.courseList.page < this.last_page) {
                    this.courseList.page += 1;
                    this.getCourseBasisFn();
                    this.last = false;
                } else {
                    this.last = true;
                }

            }


            window.addEventListener("beforeunload", (e) => { window.scroll(0, 0) })
        }
    },
    methods: {
        checkitem1(v, i) {
            this.item1active = i
            this.courseList.page = 1
            this.course = []
            console.log(v);
            this.courseList.order_by = v;
            this.getCourseBasisFn()
            this.$refs.item1.toggle();
        },
        checkitem2(v, i) {
            this.courseList.page = 1
            this.item2active = i
            this.course = []
            console.log(v);
            this.courseList.course_type = v;
            this.getCourseBasisFn()
            this.$refs.item2.toggle();
        },
        async getCourseBasisFn() {
            let res = await getCourseBasis(this.courseList)
            console.log(res.data);
            this.last_page = res.data.last_page
            this.course = [...this.course, ...res.data.list]
        },
        async getCourseClassifyFn() {
            let res = await getCourseClassify()
            // console.log(res);
            this.classifyList = res.data.appCourseType;
        }
    }
}
</script>
  
<style lang="scss" scoped>
.menu {
    margin: 80px 0px;
}

.menu-item {
    text-align: center;
    line-height: 30px;
    font-size: 18px;

    li {
        border-bottom: 1px solid #eee;
    }
}

.menu-item2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    >div {
        width: 18vw;
        margin: 2vw;
        line-height: 45px;
        font-size: 20px;
        text-align: center;
    }
}

.menu-item2-t {
    background: #ebeefe !important;
    // color: #eb6100!important;
}

.active {
    color: #eb6100 !important;
}
</style>
